<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<link rel="stylesheet" type="text/css" href="css/reset.css" />
		<script src="js/jQuery-1.11.1.js">
</script>
		<script type="text/javascript">
$(document).ready(function() {

	//关闭事件
		$('.qx').click(function() {
			$(".login_wrap").css("display", "none");
		});
		$('.zhaq').click(function() {
			$(this).css("border-bottom", "3px solid #F7691D");
			$(this).css("font-weight", "bold");
			$('.aqdl').css("border-bottom", "none");
			$('.aqdl').css("font-weight", "100");
			$(".login_form1").css("display", "block");
			$(".login_form2").css("display", "none");
		});
		$('.aqdl').click(function() {
			$(this).css("border-bottom", "3px solid #F7691D");
			$(this).css("font-weight", "bold");
			$('.zhaq').css("border-bottom", "none");
			$('.zhaq').css("font-weight", "100");
			$(".login_form2").css("display", "block");
			$(".login_form1").css("display", "none");
		});
		//用户名聚焦事件
		$(".username input").focus(function() {
			$(".username").css("border-color", "#F7691D");
			$(this).attr('placeholder', '');

		});
		//用户名失去焦点事件
		$(".username input").blur(
				function() {
					$(".username").css("border-color", "#CCCCCC");

					if ($(this).val() == "") {
						$(this).attr('placeholder', '邮箱/会员账号/手机号');

					}
					$.get("Login?op=rem&username=" + $("#username").val(),
							function(data, status) {
								if (data != "null") {
									$("#userpass").val(data);
								} else {
									$("#userpass").val("");
								}

							});

				});
		//密码聚焦事件
		$(".password input").focus(function() {
			$(this).attr('placeholder', '');
			$(".password").css("border-color", "#F7691D");
		});
		//密码失去焦点事件
		$(".password input").blur(function() {
			$(".password").css("border-color", "#CCCCCC");
			if ($(this).val() == "") {
				$(this).attr('placeholder', '请输入密码');
			}
		});
		//验证码聚焦事件
		$("#codeinput").focus(function() {
			$(".tishi").css("display", "none");
			$(this).attr('placeholder', '');
			$(this).css("border-color", "#F7691D");
		});
		//验证码失去焦点事件
		$("#codeinput").blur(
				function() {
					if ($("#codeinput").val().toUpperCase() == $(".code")
							.html().toUpperCase()) {
						$(this).css("border-color", "green");
					} else if ($(this).val() == "") {
						$(this).attr('placeholder', '请输入验证码');
						$(this).css("border-color", "#CCCCCC");
					} else {
						$(this).css("border-color", "red");

					}

				});
		//二维码提示事件
		$(".login_form2 img").mouseover(function() {
			$(".sys").css("display", "block");
		});
		$(".login_form2 img").mouseout(function() {
			$(".sys").css("display", "none");
		});

		/*随机生成4位验证码*/
		/*step1:将所有字母，数字装入一个数组备用*/
		function creatyzm() {
			var codes = [];
			//数字:48-57;unicode编码
			for ( var i = 48; i < 57; codes.push(i), i++)
				;
			/*console.log(codes);*/
			//大写字母:65-90;unicode编码
			for ( var i = 65; i < 90; codes.push(i), i++)
				;
			//小写字母:97-122;unicode编码
			for ( var i = 97; i < 122; codes.push(i), i++)
				;
			var arr = [];
			for ( var i = 0; i < 4; i++) { //从0-61之间取随机数
				var index = Math.floor(Math.random() * (57 - 0 + 1) + 0);
				var char1 = String.fromCharCode(codes[index]);
				arr.push(char1);
			}
			/*console.log(arr);*/
			var code = arr.join("");
			//document.write("验证码:" + code);
			$(".code").html(code);
			var a = getRandomColor();
			$(".codediv").css("background-color", a);
			$("#codeinput").val("");

		}
		$(".code").click(function() {

			creatyzm();
		});
		creatyzm();
		var k = 0;
		function yzmnone() {
			$.ajax( {
				type : "POST",
				url : "Login",
				data : {
					"username" : $("#username").val(),
					"userpass" : $("#userpass").val(),
					"rempass" : $("#rempass").val(),
					"op" : "login"
				},
				success : function(data) {
					if (data == "2") {
						$(".login_ts").html("！密码错误，请重试");
						//alert('密码错误');
				creatyzm();
			} else if (data == "1") {
				$(".login_ts").html("！用户名不存在,请检查");
				//alert('用户名不存在');
				creatyzm()
			} else {
				location.href = 'index.html?nowuserid=' + data;
				k = 1;
			}
		}
			});
		}
		function yzmblock() {
			if ($("#codeinput").val().toUpperCase() == $(".code").html()
					.toUpperCase()) {
				yzmnone();
			} else {
				creatyzm();
			}
		}
		$("#login").click(function() {
			if ($(".username input").val()=="") {
				$(".login_ts").html("！请输入用户名");
			} 
			else {
				if ($(".password input").val()=="") {
					$(".login_ts").html("！请输入密码");
				} else {
					k++;
					if (k >= 3) {

						$(".yzm").css("display", "block");
						$(".login_ts").html("请输入验证码");
						yzmblock();
					} else {
						yzmnone();
					}
				}
			}

		});
		//随机颜色的函数
		function getRandomColor() {

			return '#' + Math.floor(Math.random() * 16777215).toString(16);
		}

	});
</script>
		<style type="text/css">
.login_wrap {
	width: 100%;
	padding-top: 100px;
	height: 600px;
	background-color: rgba(0, 0, 0, 0.2);
}

.login_ts {
	line-height: 25px;
	height: 25px;
	/*text-align:center;*/
	padding-left: 20px;
	font-size: 12px;
	color: red;
}

.login_con {
	width: 602px;
	height: 400px;
	margin: 0 auto;
	background-color: white;
	position: relative;
}

.login_title {
	height: 2px;
	background-color: #F7691D;
}

.qx {
	position: absolute;
	right: 12px;
	cursor: pointer;
	font-family: arial;
	top: 9px;
	color: #696e78;
	font-weight: bold;
	font-size: 15px;
}

.qx:hover {
	color: #F7671D;
}

.login_info {
	width: 370px;
	height: 335px;
	margin: 35px auto;
}

.login_xz li {
	float: left;
	width: 185px;
	text-align: center;
	padding-bottom: 10px;
	cursor: pointer;
}

.zhaq {
	border-bottom: 3px solid #F7691D;
	font-weight: bold;
}

.login_form {
	width: 230px;
	margin: 0 auto;
	position: relative;
}

.login_form1 {
	padding-top: 10px;
	width: 100%;
	position: absolute;
}

.login_form2 {
	padding-top: 30px;
	position: relative;
	width: 100%;
	position: absolute;
	display: none;
	text-align: center;
}

.sys {
	display: none;
	position: absolute;
	left: -300px;
	top: -100px;
}

.login_form2 h2 {
	font-size: 15px;
}

.login_form1 div {
	margin-bottom: 10px;
}

.login_form2 p,.login_form1 p {
	font-size: 12px;
	text-align: center;
	margin-top: 15px;
}

.login_form2 p a,.login_form1 p a {
	margin-right: 20px;
	color: #333333;
}

.username,.password {
	border: 1px solid #BBBBBB;
	width: 230px;
	height: 30px;
}

.username img,.password img {
	padding: 0px 7px;
}

.username input,.password input {
	color: #aaa;
	font-size: 12px;
	width: 190px;
	height: 28px;
	border: none;
}

.login_button input {
	color: white;
	width: 230px;
	height: 34px;
	cursor: pointer;
	background-color: #FF8140;
	border-radius: 2px;
}

.login_button input:hover {
	background-color: #F7671D;
}

.useqq:hover {
	border: 1px solid #666666;
}

.useqq {
	display: block;
	width: 230;
	text-align: center;
	border: 1px solid #BBBBBB;
	border-radius: 3px;
	color: #333333;
	line-height: 35px;
	font-size: 15px;
}

.useqq img {
	padding: 10px 10px 0px 0px;
}

.jzmm {
	font-size: 10px;
	color: #808080;
}

.jzmm a {
	margin-left: 80px;
	color: #808080;
}

.login_form2 p a:hover,.login_form1 p a:hover,.jzmm a:hover {
	color: #F7671D;
}

.code {
	position: absolute;
	display: block;
	width: 100px;
	height: 32px;
	font-size: 30px;
	font-family: arial;
	font-style: italic;
	cursor: pointer;
	text-align: center;
	text-shadow: black 1px 1px 10px;
	color: rgba(255, 255, 255, 0.7);
}

.codediv {
	margin-left: 10px;
	position: relative;
	width: 100px;
	line-height: 32px;
	font-size: 20px;
	text-align: center;
	border-radius: 4px;
}

.a {
	display: block;
	font-weight: bold;
	width: 100px;
	height: 32px;
	color: rgba(1, 11, 22, 1);
}

#codeinput {
	border-radius: 3px;
	width: 100px;
	height: 28px;
	border: 1px solid #BBBBBB;
	float: left;
}
</style>
	</head>

	<body>
		<div class="login_wrap">
			<div class="login_con">
				<div class="qx">
					X
				</div>
				<div class="login_title"></div>
				<div class="login_info">
					<ul class="login_xz clearfix">
						<li class="zhaq">
							账号安全
						</li>
						<li class="aqdl">
							安全登录
						</li>

					</ul>
					<div class="login_form">
						<div class="login_form1">
							<h2 class="login_ts"></h2>

							<div class="username">
								<img src="images/user.png" alt="" />
								<input type="text" id="username" name="userName"
									placeholder="邮箱/会员账号/手机号" />
							</div>
							<div class="password">
								<img src="images/pass.png" alt="" />
								<input type="password" name="userPass" id="userpass" value=""
									placeholder="请输入密码" />
							</div>
							<div class="yzm clearfix" style="display: none;">
								<input id="codeinput" type="text" placeholder="请输入验证码" />
								<div class="codediv" style="float: left;">
									<span class="code"></span><span class="a">点击切换</span>
								</div>

							</div>

							<div class="jzmm">
								<input type="checkbox" name="" id="rempass" value="" />
								记住密码
								<a href="">忘记密码</a>
							</div>
							<div class="login_button">
								<input type="button" id="login" value="登录" />
							</div>

							<a class="useqq" href=""><img src="images/icon_qq.png" alt="" />使用QQ直接登录</a>
							<p>
								<a href="register.jsp">立即注册</a>

							</p>
						</div>
						<div class="login_form2">
							<div class="sys">
								<img src="images/sys.png" alt="" />
							</div>
							<img src="images/gen.png" alt="" />
							<h2>
								请打开微博客服端“扫一扫”
							</h2>
							<p>
								<a href="">立即注册</a>

							</p>
						</div>
					</div>
				</div>
			</div>
		</div>
	</body>

</html>